<template>
  <div class="login">
    <div class="icon iconfont icon-yonghu"></div>
    <div class="form-item">
      <span class="icon iconfont icon-yonghuming"></span>
      <input type="text" autocomplete="off" v-model="user.phone" placeholder="账户" />
      <p class="tip">输入合法的用户名</p>
    </div>
    <div class="form-item">
      <span class="icon iconfont icon-mima"></span>
      <input type="password" autocomplete="off" v-model="user.password" placeholder="密码" />
      <p class="tip" ref="login">用户名或密码错误</p>
    </div>
    <div class="form-item">
      <button @click="login(user)">登录</button>
    </div>
    <div class="reg-bar">
      <a class="reg" href="javascript:" @click="jumpPage('/regist')">立即注册</a>
      <a class="forget" href="javascript:">忘记密码</a>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import axios from "axios"
import router from '@/router'

export default {
  computed: {
    ...mapState(["ip", "port"])
  },
  data() {
    return {
      user: {}
    };
  },
  methods: {
    ...mapActions(["jumpPage","isLogin"]),
    login(value) {
      axios.post(`http://${this.ip}:${this.port}/consumer/login`, value).then(res => {
        if (res.data.code == 200) {
          this.isLogin(res.data.data);
          router.push({ path: "/index" });
        } else {
          this.$refs.login.style.display = "inline";
        }
      });
    }
  }
};
</script>

<style scoped>
.login {
  position: absolute;
  width: 430px;
  height: 550px;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
}

.icon-yonghu {
  width: 104px;
  height: 104px;
  font-size: 105px;
  color: #fff;
  margin: 50px auto 80px;
}

.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}

input::-webkit-input-placeholder {
  color: #fff;
}

input::-moz-input-placeholder {
  color: #fff;
}

input::-ms-input-placeholder {
  color: #fff;
}

.form-item input {
  width: 288px;
  height: 48px;
  padding-left: 70px;
  border: 1px solid #fff;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  background-color: transparent;
  outline: none;
}

.form-item button {
  width: 360px;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font-size: 18px;
  color: #1f6f4a;
  outline: none;
  cursor: pointer;
  background-color: #fff;
}

.form-item .tip {
  display: none;
  position: absolute;
  left: 25px;
  top: 55px;
  font-size: 14px;
  color: #8f3a3e;
}

.reg-bar {
  width: 360px;
  margin: 20px auto 0;
  font-size: 14px;
  overflow: hidden;
}

.reg-bar a {
  color: #fff;
  text-decoration: none;
}

.reg-bar a:hover {
  text-decoration: underline;
}

.reg-bar .reg {
  float: left;
}

.reg-bar .forget {
  float: right;
}

.icon-yonghuming,
.icon-mima {
  position: absolute;
  left: 13px;
  top: 1px;
  font-size: 48px;
  color: #fff;
}

.icon-mima {
  top: 6px;
  left: 17px;
  font-size: 39px;
}
</style>